<template>
  <!-- 订单详情按钮 -->
  <view :class="['i-button', 'btn-content', 'default', shape]" :style="{ background: bgColor, color }">
    <slot>
      <view class="slot flex flex-ai-c flex-jc-c">
        <i-icon v-if="icon" :icon="icon" :color="color" class="icon-box"></i-icon>
        <text class="btn-text">{{ text }}</text>        
      </view>
    </slot>
  </view>
</template>

<script>
  export default {
    name: 'iButton',
    props: {
      text: {
        type: String,
        default: ''
      },
      icon: {
        type: String,
        default: ''
      },
      color: {
        type: String,
        default: '#fff'
      },
      bgColor: {
        type: String,
        default: 'linear-gradient(-90deg, #FBD220, #FFE23E)'
      },
      // square | circle | circleLeft | circleRight
      shape: {
        type: String,
        default: 'square'
      }
    }
  }
</script>

<style lang="scss" scoped>
.btn-content {
  display: inline-block;
  text-align: center;
  font-size: 32rpx;
}
.default {
  width: 174rpx;
  height: 88rpx;
}
.slot {
  line-height: 88rpx;
  
  .icon-box {
    margin-left: 10rpx;
  }
}
.circleLeft {
  border-radius: 100rpx 0 0 100rpx;
}
.circleRight {
  border-radius:  0 100rpx 100rpx 0;
}
.circle {
  border-radius: 200rpx;
}
</style>
